<template lang="pug">
  .clearfix.margin-auto.pl-50.pr-50
    Table.hasTitle-table.beautiful-table(:columns="thead" :data="row.detail")
      template(slot-scope="{ row, index }" slot="action")
        Button.mr-10(type="text" @click="gotoReceivableBalance(row)") 应收差额说明
        Button(type="text" @click="gotoPayableBalance(row)") 应付差额说明
</template>

<script>
import { CommercialChildrenThead } from './tableHead.js'
import _cloneDeep from 'clone-deep'

export default {
  name: '',

  props: {
    row: Object
  },

  data () {
    return {
      thead: _cloneDeep(CommercialChildrenThead),
      tableData: []
    }
  },

  methods: {
    // 去往应收差额说明
    gotoReceivableBalance (row) {
      var month = row.periodMonth < 10 ? '0' + row.periodMonth : row.periodMonth
      this.$router.push({
        path: '/receivableBalance',
        name: 'receivableBalance',
        query: {
          customerName: row.customerName,
          insureNo: row.commercialNo,
          month: month,
          year: row.periodYear,
          date: row.periodYear + '-' + month
        }
      })
    },

    // 去往应付差额说明
    gotoPayableBalance (row) {
      var month = row.periodMonth < 10 ? '0' + row.periodMonth : row.periodMonth
      this.$router.push({
        path: '/payableBalance',
        name: 'payableBalance',
        query: {
          customerName: row.customerName,
          insureNo: row.commercialNo,
          month: month,
          year: row.periodYear,
          date: row.periodYear + '-' + month
        }
      })
    }
  } // methods end
}
</script>

<style lang="less" scoped>

</style>
